import React from 'react';
import { Row, Col, Card, Avatar, Badge, Spin } from 'antd';
import { Line, Bar, Pie, Radar } from '@ant-design/charts';
import dayjs from 'dayjs';
import { LoadingOutlined } from '@ant-design/icons';

// 模拟数据
const mockData = {
  sales: [
    { month: 'Jan', value: 120 },
    { month: 'Feb', value: 200 },
    { month: 'Mar', value: 150 },
    { month: 'Apr', value: 80 },
    { month: 'May', value: 70 },
    { month: 'Jun', value: 110 },
  ],
  userMetrics: [
    { category: 'Active Users', value: 1500 },
    { category: 'New Users', value: 300 },
    { category: 'Churn Rate', value: 15 },
  ],
  productDistribution: [
    { type: 'Electronics', value: 45 },
    { type: 'Clothing', value: 30 },
    { type: 'Furniture', value: 25 },
  ],
  radarData: [
    { item: 'Speed', score: 85 },
    { item: 'Usability', score: 78 },
    { item: 'Design', score: 92 },
    { item: 'Price', score: 65 },
    { item: 'Support', score: 88 },
  ],
};

const Dashboard = () => {
  // 加载状态
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    // 模拟数据加载延迟
    const timer = setTimeout(() => setLoading(false), 1000);
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: 50 }}>
        <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
      </div>
    );
  }

  return (
    <div style={{ padding: '20px' }}>
      {/* 顶部概览 */}
      <Row gutter={24} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card title="总销售额" bordered={false}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Avatar size={50} style={{ backgroundColor: '#52c41a', marginRight: 16 }}>
                <span role="img" aria-label="money">
                  💰
                </span>
              </Avatar>
              <div>
                <h3>${mockData.sales[5]?.value}</h3>
                <Badge status="success" text="环比增长 12%" />
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="活跃用户" bordered={false}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Avatar size={50} style={{ backgroundColor: '#1890ff', marginRight: 16 }}>
                <span role="img" aria-label="users">
                  👥
                </span>
              </Avatar>
              <div>
                <h3>{mockData.userMetrics[0]?.value}</h3>
                <Badge status="processing" text="日活 1.2K" />
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={[24, 24]}>
        <Col xs={24} sm={12} md={8}>
          <Card title="月度销售额趋势">
            <Line
              data={mockData.sales}
              xField="month"
              yField="value"
              point={{ size: 5 }}
              line={{ color: '#52c41a' }}
              tooltip={{ showMarkers: true }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card title="用户活跃分布">
            <Bar
              data={mockData.userMetrics}
              xField="category"
              yField="value"
              meta={{ value: { min: 0 } }}
              color="#1890ff"
              legend={{ position: 'top' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card title="产品类别占比">
            <Pie
              data={mockData.productDistribution}
              angleField="value"
              colorField="type"
              radius={0.8}
              label={{ offset: 20 }}
            />
          </Card>
        </Col>
      </Row>

      {/* 高级图表 */}
      <Row gutter={24} style={{ marginTop: 24 }}>
        <Col xs={24} md={12}>
          <Card title="用户满意度雷达图">
            <Radar
              data={mockData.radarData}
              xField="item"
              yField="score"
              meta={{ score: { min: 0, max: 100 } }}
              color="#73d13d"
              point={{ size: 4 }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
